<template>
  <div class="bigbox">
    <van-nav-bar
  :title="$route.name"
  left-arrow

/>
    <div class="header">
      <span class="dz iconfont">&#xe611;</span>
      <img class="logo" src="../assets/img/white.png" alt />

      <p class="search">
        <i class="iconfont iconss">&#xe60e;</i>
        <input class="sstext" type="text" placeholder="按内容搜索" />
      </p>
      <span class="iconfont shop">&#xe6ae;</span>
    </div>

    <div class="nav clearfix">
      <ul>
        <li
          @click="undercolor(idx)"
          class="navtext"
          v-for="(item, idx) in navlist"
          :key="item.id"
        >
          <i :class="[idx == num ? 'underline' : '']"> {{ item.name }} </i>
        </li>
        <li class="fl">
          <span class="iconfont">&#xe61a;</span>
          <span>分类</span>
        </li>
      </ul>
    </div>

    <div class="banner">
<van-swipe class="my-swipe" :autoplay="2000" indicator-color="red">
  <van-swipe-item v-for="item in bannerlist "  :key='item.id'>
    <img class="lbttp" :src="$img+item.img" alt="">
  </van-swipe-item>
  
</van-swipe>
      <div class="time">
        <ul class="tan">
          <li class="timesix" v-for="item in timelist" :key="item.id">
            <img :src="item.img" alt="" />
            <p class="sixtext">{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="three">
      <div class="left">
        <div class="left-l">
          <span class="xsms">限时秒杀</span>
        </div>
        <div class="left-r">
          <span class="more">查看更多</span>
          <span>></span>
        </div>

        <p class="day">每天0点场，好货秒不停</p>
        <p class="shijian">
          <span class="zfx">05</span><i class="mh">:</i>
          <span class="zfx">20</span><i class="mh">:</i>
          <span class="zfx">48</span>
        </p>
      </div>

      <div class="right">
        <div class="up">
          <p class="ppsx">品牌上新</p>
          <p class="nine">9点整抢大牌</p>
          <p class="hbao">疯狂抢红包></p>
        </div>
        <div class="down">
          <p class="ryhh">日用好货</p>
          <p class="sj">愿君多采撷</p>
          <p class="smjz">塞满奖卷 ></p>
        </div>
      </div>
    </div>

    <div class="Tone">
      <div class="box">
        <p class="xxk">
      <van-tabs type="card">
  <van-tab title="热卖新品">
    <van-card
    v-for='item in a'
    :key='item.id'
  num="3"
  :price="item.price"
  :desc="item.goodsname"
  :title="item.goodsname"
 :thumb="item.img?$img+item.img:''"
/>
  </van-tab>
  <van-tab title="最新潮品">
    <van-card
     tag='新品'
    v-for='item in b'
    :key='item.id'
  num="3"
  :price="item.price"
  :desc="item.goodsname"
  :title="item.goodsname"
 :thumb="item.img?$img+item.img:''"
/>
  </van-tab>

  <van-tab title="全部">
 <van-card

    v-for='item in c'
    :key='item.id'
  num="3"
  :price="item.price"
  :desc="item.goodsname"
  :title="item.goodsname"
  :thumb="item.img?$img+item.img:''"
/>

  </van-tab>
 
</van-tabs>
        </p>
        <!-- <div class="ysld" v-for="item in shoplist" :key="item.id">
          <div class="ysldl">
            <img class="pic" :src="item.img" alt="" />
          </div>
          <div class="ysldr">
            <p>{{ item.name }}</p>
            <p>{{ item.piace }}</p>
            <p>{{ item.name }}</p>
            <p>{{ item.qg }}</p>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import {getBanner,getIndexGoods}  from '../util/axios'
export default {
  data() {
    return {
      num: 0,
      bannerlist:[],
      a:[],
      b:[],
      c:[],
      navlist: [
        {
          id: 1,
          name: "推荐",
        },
        {
          id: 2,
          name: "女装",
        },
        {
          id: 3,
          name: "鞋包",
        },
        {
          id: 4,
          name: "居家",
        },
        {
          id: 5,
          name: "母婴",
        },
        {
          id: 6,
          name: "美妆",
        },
      ],
      timelist: [
        {
          id: 1,
          name: "限时秒杀",
          img: require("../assets/img/seckill.png"),
        },
        {
          id: 2,
          name: "畅享商品",
          img: require("../assets/img/seckill.png"),
        },
        {
          id: 3,
          name: "品质大牌",
          img: require("../assets/img/seckill.png"),
        },
        {
          id: 4,
          name: "小U商城",
          img: require("../assets/img/seckill.png"),
        },
        {
          id: 5,
          name: "积分商城",
          img: require("../assets/img/seckill.png"),
        },
      ],
      shoplist: [
        {
          id: 1,
          name: "雅诗兰黛染发膏60ml",
          img: require("../assets/img/05.png"),
          qg: "立即抢购",
          piace: "￥123.00",
        },
        {
          id: 2,
          name: "雅诗兰黛染发膏60ml",
          img: require("../assets/img/05.png"),
          qg: "立即抢购",
          piace: "￥123.00",
        },
        {
          id: 3,
          name: "雅诗兰黛染发膏60ml",
          img: require("../assets/img/05.png"),
          qg: "立即抢购",
          piace: "￥123.00",
        },
      ],
    }
  },

  methods: {
    undercolor(i) {
      console.log();
      this.num = i;
    },
  },
  components: {

  },
  mounted(){
     
     getBanner()
     .then(res=>{

       if(res.code==200){

         this.bannerlist=res.list
       }
       console.log(res);
     }),


     getIndexGoods()
     .then(res=>{
       console.log(res);
       this.a=res.list[0].content
       this.b=res.list[1].content 
       this.c=res.list[2].content 

     })
 
  }
 
};
</script>

<style lang="" scoped>
@import '../assets/css/home.css';

.bigbox{
  
  margin-bottom:180px;
}

.van-nav-bar{
  background-color: rgb(255, 96, 64);
  color: #ffffff;
}
/* @import ; */
.header {
  width: 100%;
  height: 1.6rem;
  background-color: rgb(255, 96, 64);
}
.dz {
  margin-left: 0.2rem;
  font-size: 0.55rem;
  color: #ffffff;
}
.logo {
  width: 1.84rem;
  height: 0.48rem;
}
.search {
  display: inline-block;
  height: 0.64rem;
  width: 3.4rem;
  border: 1px solid red;
  background-color: #ffffff;
  padding-top: 0.1em;
  box-sizing: border-box;
  margin-top: .4rem;

  padding-left: 0.1rem;
  text-align: center;
}
.iconss {
  width: 0.32rem;
  height: 0.32rem;
  float: left;
  color: gray;
}
.sstext {
  float: left;
  height: 0.44rem;
  width: 1.4rem;
  border: none;
  outline: none;
  margin-left: 0.2rem;
  font-size: 1px;
}
.shop {
  float: right;
  margin: 0.48rem 0.08rem;
  font-size: 0.4rem;
  color: #ffffff;
}
</style>
